<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A-Frame Logo</title>
    <meta name="description" content="A-Frame Logo - A-Frame">
    <script src="../../../dist/aframe-master.js"></script>
    <script src="https://unpkg.com/aframe-event-set-component@4.2.1/dist/aframe-event-set-component.min.js"></script>
  </head>
  <body>
    <a-scene vr-mode-ui="enabled: false;"
             background="color: #24CAFF;"
             renderer="colorManagement: true;">
      <a-assets>
        <a-asset-item id="treeModel" src="../../assets/models/tree1.glb"></a-asset-item>
        <a-mixin
          id="tree"
          position="0 10 0"
          animation="property: object3D.position.y; to: 0; dur: 800; easing: easeOutCubic"
          event-set__loaded="visible: true; _delay: 100"
          gltf-model="#treeModel"
          scale="2.5 2.5 2.5"
          visible="false"></a-mixin>
      </a-assets>

      <!-- Quasi-isometric camera -->
      <a-entity animation="property: object3D.position.y; from: 5; to: 0; dur: 4000; easing: easeOutCubic">
        <a-entity position="0 880 1290" rotation="-34 0 0">
          <a-entity id="camera" camera="near: 1000; far: 4000; fov: 2.2"></a-entity>
        </a-entity>
      </a-entity>

      <a-entity id="logo" rotation="0 45 0">
        <!-- Right side -->
        <a-entity animation="property: object3D.scale.y; from: 0.0001; to: 1; delay: 200; dur: 1000; easing: easeOutCubic"
                  rotation="-20 0 0" position="0 0 10.75" scale="1 0.0001 1"
                  event-set__loaded="visible: true; _delay: 300"
                  visible="false">
          <a-box width="12.5" depth="1" height="30" color="#EF2D5E" position="0 15 0">

            <!-- Left side -->
            <a-entity animation="property: object3D.scale.y; from: 0.0001; to: 1; delay: 800; dur: 800; easing: easeOutCubic"
                      rotation="-140 0 0" position="0 15 0" scale="1 0.0001 1">
              <a-box width="12.49" depth=".1" height="30" color="#24CAFF" position="0 15 -.52" shader="flat"></a-box>
              <a-box width="12.5" depth="1" height="30" color="#EF2D5E" position="0 15 0"></a-box>
            </a-entity>
          </a-box>
        </a-entity>

        <!-- Cross-bar -->
        <a-entity animation="property: object3D.scale.y; from: 0.0001; to: 1; delay: 800; dur: 600; easing: easeOutCubic"
                  rotation="-90 0 0" position="0 8 7.5" scale="1 0.0001 1"
                  event-set__loaded="visible: true; _delay: 500"
                  visible="false">
          <a-box width="12.45" depth=".1" height="14" color="#F2E646" position="0 7 .52" shader="flat"></a-box>
          <a-box width="12.5" depth="1" height="14" color="#EF2D5E" position="0 7 0"></a-box>
        </a-entity>

        <!-- Clouds -->
        <a-entity>
          <!-- Large, foreground -->
          <a-box animation="property: object3D.position.z; to: 340; dur: 36000; loop: true"
                 position="-280 240 180" color="white" opacity="0.25" width="18" depth="28" height="6"></a-box>

          <a-box animation="property: object3D.position.z; to: 120; delay: 12000; dur: 48000; easing: linear; loop: true"
                 position="5 32 -80" color="white" opacity="0.65" width="8" depth="12" height="4"></a-box>

          <!-- Behind the A -->
          <a-box animation="property: object3D.position.z; to: 100; delay: 1000; dur: 36000"
                 event-set__loaded="visible: true; _delay: 1000"
                 position="10 12 -10" color="white" opacity="0.75" width="6" depth="9" height="4" visible="false"></a-box>

          <a-box animation="property: object3D.position.z; to: 120; delay: 200; dur: 52000; easing: linear; loop: true"
                 position="20 16 -80" color="white" opacity="0.5" width="8" depth="12" height="3"></a-box>

          <a-box animation="property: object3D.position.z; to: 120; delay: 200; dur: 50000; easing: linear; loop: true"
                 position="-20 18 -50" color="white" opacity="0.8" width="8" depth="12" height="3"></a-box>

          <a-box animation="property: object3D.position.z; to: 120; delay: 20000; dur: 48000"
                 position="26 20 -80" color="white" opacity="0.75" width="5" depth="7" height="3"></a-box>
        </a-entity>

        <!-- Shadow -->
        <a-entity rotation="-90 0 0">
          <a-plane animation="property: object3D.scale.y; from: 0.0001; to: 1; easing: easeOutCubic; delay: 600; dur: 1000"
                   width="12.5" height="20" position="0 0 0.1" pivot="0 -10 0" color="#21897C" scale="1 0.0001 1"></a-plane>
        </a-entity>

        <!-- Base -->
        <a-entity>
          <a-plane animation="property: object3D.position.y; to: 0; dur: 1600; easing: easeOutCubic"
                   width="30" height="30" color="#249889" rotation="-90 0 0" position="0 -40 0"></a-plane>
        </a-entity>

        <!-- Trees -->
        <a-entity position="-10 0.2 -10">
          <a-entity id="tree" mixin="tree" animation="delay: 650" animation__visible="delay: 800"></a-entity>
        </a-entity>
        <a-entity position="-10 0.2 6">
          <a-entity mixin="tree" animation="delay: 400" animation__visible="delay: 400"></a-entity>
        </a-entity>
        <a-entity position="10 0.2 10">
          <a-entity mixin="tree" animation="delay: 600" animation__visible="delay: 600"></a-entity>
        </a-entity>
      </a-entity>

      <a-light type="directional" color="#FFF" intensity="0.45" position="4 2 1"></a-light>
      <a-light type="ambient" color="#A8A8A8"></a-light>
    </a-scene>
  </body>
</html>
